import Avator from '../../../common/Avator'
import { getPersonalItem, getPersonalLabel, getRgb } from '../../../common/utils'
import Title from '../components/title'
import { context } from '../../../common/context'

function ResumeHeader() {
  const { resume: { customization, personalDetails } } = context

  const { applyAccentColor, header, colors } = customization
  const { position, photoObj } = header

  const detailsOrder = (personalDetails?.detailsOrder || []).filter(item => item !== 'name' && item !== 'expJob')
  const nameStyle: any = {
  }
  const color = getRgb((colors as Colors).strong.accentColor)

  if (applyAccentColor?.includes('name')) {
    nameStyle.color = color
  }
  const jobStyle: any = {

  }
  if (applyAccentColor?.includes('expJob')) {
    jobStyle.color = color
  }

  const nameWraperStyle: any = {
    display: 'flex',
    marginBottom: '10px',
    gap: "10px",
    alignItems: 'flex-end'
  }
  if (position === 'top') {
    nameWraperStyle.justifyContent = 'center'
  }

  const arr = []
  const tobeshowdetailsOrder = ['name', 'expJob', ...detailsOrder].map((d: any) => {
    return { name: getPersonalLabel(personalDetails, d, false), value: getPersonalItem(personalDetails, d), type: d }
  })
    .filter(item => item.value)

  if (tobeshowdetailsOrder.length % 2 !== 0) {
    tobeshowdetailsOrder.push({
      name: '',
      value: '',
      type: ''
    })
  }
  for (let i = 0; i < tobeshowdetailsOrder.length; i++) {
    if (i % 2 === 0) {
      arr.push([tobeshowdetailsOrder[i]])
    }
    else {
      arr[~~(i / 2)].push(tobeshowdetailsOrder[i])
    }
  }
  return <>
    <tr>
      <td colSpan={5} style={{ border: 'none', height: '50px' }}>
        <div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '32px', position: 'relative', top: '-14px' }}>
        个人简历
        </div>
      </td>
    </tr>
    {
      arr.map((d, index) => {
        return <tr>
          {
            d.map((t, index2) => {
              return <>
                <Title className='center label' width={120}>{t.name}</Title>
                <td
                  width={200}
                  style={ { padding: ' 0 20px', color: t.type === 'name' ? nameStyle.color : t.type === 'expJob' ? jobStyle.color : '' }}
                  colSpan={
                    index > 2 && index2 === 1 ? 2 : 1
                  }
                >{t.value}</td>
                {
                  index === 0 && index2 === 1 && photoObj.showPhoto && personalDetails.photoObj.photo
                    ? <td rowSpan={3} style={{ padding: 0 }}>
                      <Avator {...personalDetails.photoObj}{...photoObj}></Avator>
                    </td>
                    : null
                }
              </>
            })
          }
        </tr>
      })
    }

  </>
}
export default ResumeHeader
